<template>
  <div class="about">
    <div class="chuli" @click="chuli">处理</div>
    <h3>{{this.network.net}}</h3>
    <h2>{{this.showcount}}</h2>
    <div class="info">
      <h5>响应式的</h5>
      <ul>
        <li v-for="item in info" :key="item.id">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: "About",
  computed: {
      ...mapState(["txt","count","network","info"]),
      ...mapGetters(["showcount"])
  },
  data(){
    return{};
  },
  methods:{
    ...mapMutations(["addN","addMutations"]),
    ...mapActions(["actNum"]),
    chuli(){
      this.actNum({name: "小茶",age: 25});
    }
  }
}
</script>
<style lang="less">
.chuli {
  width: 100vw;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: hotpink;
}
.info {
  width: 80vw;
  height: 40%;
  border: 2px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  h5 {
    text-align: center;
  }
}
</style>